import React, { useState } from 'react';

// 导入可复用的差异对比模态框组件
import DiffeditorModal from './components/DiffeditorModal';

const Home: React.FC = () => {
  const [isDiffModalOpen, setIsDiffModalOpen] = useState(false);
  
  // 示例内容 - HTML 代码对比
  const htmlOldVersion = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>旧版标题</title>
</head>
<body>
  <h1>旧版页面</h1>
  <p>这是旧版内容</p>
</body>
</html>`;
  
  const htmlNewVersion = `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新版标题 - 响应式设计</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>新版页面</h1>
    <nav>
      <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p>这是经过优化的新版内容</p>
    <p>增加了响应式设计支持</p>
  </main>
</body>
</html>`;
  
  return (
    <div className="home p-6">
      <h1 className="text-3xl font-bold mb-4">首页</h1>
      <p className="mb-6">欢迎来到我们的应用！</p>
      
      {/* 演示差异对比模态框组件 */}
      <div className="mt-8">
        <h2 className="text-xl font-semibold mb-3">功能演示</h2>
        <button 
          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600 transition-colors"
          onClick={() => setIsDiffModalOpen(true)}
        >
          查看HTML代码对比示例
        </button>
      </div>
      
      {/* 使用可复用的差异对比模态框组件 */}
      <DiffeditorModal
        open={isDiffModalOpen}
        onRequestClose={() => setIsDiffModalOpen(false)}
 
        diff={{original:htmlOldVersion,modified:htmlNewVersion}}
        leftLabel="旧版HTML"
        rightLabel="新版HTML"
        title="HTML代码版本对比"
        mode="html"
      />
    </div>
  );
};

export default Home;